<template>
	<div class="items-center" :class="inline ? 'inline-flex' : 'flex'">
		<sports-icon :sport-id="sportId" />
		<div class="mx-1 flex-1 truncate">
			<betting-name
				:id="selectionId"
				:betslip-line="betslipLine"
				:points="points"
				:side="side"></betting-name>
			{{ eventName }}
		</div>
		<betting-odds :value="odds" at />
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { SportsIcon } from '@/components/sports'
import { BettingOdds, BettingName } from '@/components/betting'
import { SportsType } from '@/enums'
defineProps({
	sportId: {
		type: String as PropType<SportsType>,
		default: ''
	},
	betslipLine: {
		type: String,
		default: ''
	},
	points: {
		type: [Number, String]
	},
	side: {
		type: Number
	},
	odds: {
		type: [Number, String]
	},
	selectionId: {
		type: String,
		default: ''
	},
	eventName: {
		type: String,
		default: ''
	},
	inline: {
		type: Boolean,
		default: false
	}
})
</script>
